<!--个人信息：我的订单-->
<template>
  <div>
<!--    <Table border :columns="columns" :data="orders" size="large" no-data-text="你还没有订单，快点去购物吧"></Table>-->
    <div>
      <div style="height:520px; overflow-x:scroll;">
      <table id="table" class="tftable" style="width:2000px; height:100px; text-align:center; overflow-x:scroll;" :data="orders" no-data-text="你还没有订单，快点去购物吧">
        <thead>
        <tr>
          <th class="thstyle">序号</th>
          <th class="thstyle">订单号</th>
          <th class="thstyle">缩略图</th>
          <th style="width: 600px">商品名</th>
          <th class="thstyle">套餐</th>
          <th class="thstyle">数量</th>
          <th class="thstyle">价格</th>
          <th class="thstyle">购买时间</th>
          <th class="thstyle">地址</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in orders" :key="index">
          <td class="thstyle">{{item.orderId}}</td>
          <td class="thstyle">{{item.orderSn}}</td>
          <td class="thstyle"><img :src="item.picUrl" class="image"/></td>
          <td class="thstyle">{{item.productName}}</td>
          <td class="thstyle">{{item.productTypeName}}</td>
          <td class="thstyle">{{item.productCnt}}</td>
          <td class="thstyle">{{item.payMoney}}</td>
          <td class="thstyle">{{item.payTime}}</td>
          <td class="thstyle"><div>{{item.orderAddr}}</div></td>
        </tr>
        </tbody>
      </table>
    </div>
    </div>
    <el-button-group class="page">
      <el-button type="primary" @click="firstPage">首页</el-button>
      <el-button type="primary" icon="el-icon-arrow-left" @click="prePage">上一页</el-button>
      <el-button type="primary" disabled>第{{this.pages.pageNum}}页</el-button>
      <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div class="page-size">
<!--      <Page :total="100" show-sizer></Page>-->
<!--      <Page :total="dataCount" :page-size="pageSize" show-total  @on-change="changepage"></Page>-->
    </div>
  </div>
</template>

<script>
import {orderInfo} from '../../api/order';
export default {
  name: 'MyOrder',
  data () {
    return {
      orders: [],
      dataCount: 0,
      pages: {
        pageNum: 1,
        pageSize: 5
      }
    };
  },
  // 生命周期钩子函数，初始化数据
  mounted () {
    this.init();
  },
  methods: {
    init (url, config) {
      console.log('hhh');
      this.showPage();
    },
    // 显示当前页信息
    showPage () {
      orderInfo(this.pages).then((res) => {
        if (res.data.code === '00000') {
          console.log(res.data);
          // 处理类型
          // product获取数据
          console.log(res.data.code);
          this.orders = res.data.data;
          console.log(this.orders);
          this.dataCount = this.orders.length;
          if (this.dataCount === 0 && this.pages.pageNum !== 1) {
            // 超出尾页了
            this.pages.pageNum = this.pages.pageNum - 1;
            this.showPage();
            this.$Message.error('现在已经是尾页了哦~');
          }
        } else {
          this.$Message.error(res.data.code);
        }
      });
    },
    // 下一页
    nextPage () {
      this.pages.pageNum = this.pages.pageNum + 1;
      this.showPage();
    },
    // 上一页
    prePage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = this.pages.pageNum - 1;
        this.showPage();
      }
    },
    // 首页
    firstPage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = 1;
        this.showPage();
      }
    },
    // 初始化列表数据
    initColumn () {
      for (let i = 0; i < this.orders.length; i++) {
        // columns[i].key=this.orders[i].
      }
    }
  }
};
</script>

<style scoped>
.page-size {
  margin: 15px 0px;
  /*display: flex;*/
  display: table-cell;
  justify-content: flex-end;
  align-items: center;
}
.image{
  width: 45px;
  height: 45px;
  margin: 8px auto;
  display: table-cell;
  text-align: center;
}
table.tftable,
table.table-count {
  font-size: 13px;
  color: #333333;
  /*width: 100%;*/
  border-width: 1px;
  border-collapse: collapse;
}

table.table-count th{
  width:300px;
  height:60px;
}
table.table-count td {
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  border-width: 1px;
  border-style: solid;
  border-color: #e4e4e4;
  text-align: center;
  width:300px;
  height:80px;
  overflow:auto
}

table.tftable th{
  width:300px;
  height:60px;
}
table.tftable td {
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #e4e4e4;
  text-align: center;
}
.tftable{
  margin-left: 1%;
  margin-bottom: 10px;
  margin-top: 10px;
}
table.tftable tr:hover {
  background:  #C3ECFF;
}
.tftable>thead>tr:hover{
  background: white;
}
.thstyle{
  width:300px;
  height:40px;
}
.page{
  position: absolute;
  left: 55%;
  transform: translate(-50%);
}
</style>
